<script setup lang="ts" name="DeptDetail">
import { getDeptApi, listDeptApi } from "@/api/system/dept";

const { proxy } = getCurrentInstance();

const { sys_normal_disable } = useDict("sys_normal_disable")

const emit = defineEmits(['closeDialog']);

const props = defineProps({
  id: {
    default: null,
  },
  title: {
    type: String,
    default: false,
  }
})
const open = ref(false);

const form = ref<DeptRecord>({});

// 部门列表
const deptMap = ref({})

/** 获取部门管理详情 */
function getData() {
  if (props.id || props.id === 0) {
    getDeptApi(props.id).then(response => {
      form.value = response.data;
      open.value = true;
    }).catch(err => {
      console.error(err)
      closeDialog(false);
    })
  } else {
    open.value = true;
  }
}

// 获取部门列表
function getDeptList() {
  listDeptApi().then(response => {
    response.data.forEach(item => {
      deptMap.value[item.deptId] = item.deptName;
    })
  });
}


/** 关闭弹窗 */
function closeDialog(refresh: boolean) {
  open.value = false;
  emit("closeDialog", refresh);
}

watch(open, (val) => {
  if (!val) {
    closeDialog(false);
  }
})

getData();
getDeptList();
</script>

<template>
  <!-- 部门管理详情对话框 -->
  <el-dialog :title="title" v-model="open" width="700px" append-to-body>
    <div class="detail-form">
      <el-form ref="deptForm" :model="form" label-width="80px">
        <el-form-item label="上级部门" prop="parentId">
          {{ deptMap[form.parentId]}}
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          {{ form.deptName }}
        </el-form-item>
        <el-form-item label="显示排序" prop="orderNum">
          {{ form.orderNum }}
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          {{ form.leader }}
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          {{ form.phone }}
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          {{ form.email }}
        </el-form-item>
        <el-form-item label="部门状态" prop="status">
          <dict-tag :options="sys_normal_disable" :value="form.status" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>